<template>
    <div class="container">
        <div class="wrapper">
            <div class="left">
                <img src="@/assets/login_banner.png" height="380">
            </div>

            <div class="right">
                <h5 class="brand">
                    <img src="@/assets/logo.svg" width="45">
                    {{ title }}
                </h5>
                <n-form
                    class="form-wrapper"
                >
                    <n-input v-model:value="form.username" size="large" placeholder="请输入用户名">
                        <template #prefix>
                            <n-icon :component="User" />
                        </template>
                    </n-input>
                    <n-input v-model:value="form.password" type="password" size="large" placeholder="请输入密码" style="margin: 30px 0;">
                        <template #prefix>
                            <n-icon :component="Locked" />
                        </template>
                    </n-input>
                    <n-button size="large" color="#316C72FF" @click="handleLoginOnClick">登录</n-button>
                </n-form>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { User, Locked } from '@vicons/carbon'
import { useUserStore } from '@/store/modules/user'
import { IMessage } from '@/utils/message'
import { ViewHome } from '@/enums'
import { ApiCode } from '@/enums/ApiCode'

const title = import.meta.env.VITE_APP_TITLE

const router = useRouter()
const userStore = useUserStore()

const form = reactive({} as BaseUser)

const handleLoginOnClick = async () => {
    const code = await userStore.Login(form)
    if(ApiCode.SUCCESS == code){
        await router.push({ path: ViewHome.Path })
        IMessage({ content: '登录成功' })
    }
}

</script>

<style lang="scss">
.container{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(@/assets/login_bg.jpg);
    background-size: 100%;
    .wrapper{
        width: 1000px;
        box-shadow: 1.5px 3.99px 27px 0px rgb(0 0 0 / 10%);
        background-color: rgba(255, 255, 255, 0.3);
        display: flex;
        .left{
            padding: 40px;
            border-right: 1px solid #cccccc5e;
        }
        .right{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            .brand{
                width: 100%;
                padding: 15px;
                color: #6a6a6a;
                font-size: 24px;
                font-weight: normal;
                text-align: center;

                display: flex;
                align-items: center;
                justify-content: center;
                img{
                    margin-right: 25px;
                }
            }
            .form-wrapper{
                width: 360px;
            }
            button{
                width: 100%;
            }
        }
    }
}
</style>